<template>
	<view class="v-tabs " :id="elId">
		<scroll-view
			id="scrollContainer"
			:scrollLeft="scroll ? scrollLeft : 0"
			:scrollWithAnimation="scroll"
			:scrollX="scroll"
			:style="'position:' + (fixed ? 'fixed' : 'relative') + ';' + 'z-index:' + 1993 + ';'"
		>
			<view
				class="v-tabs__container "
				:style="
					'display:' +
						(scroll ? 'inline-flex' : 'flex') +
						';' +
						'white-space:' +
						(scroll ? 'nowrap' : 'normal') +
						';' +
						'background:' +
						bgColor +
						';' +
						'height:' +
						height +
						';' +
						'padding:' +
						padding +
						';'
				"
			>
				<view
					@tap="change(i)"
					class="v-tabs__container-item "
					:style="
						'color:' +
							(current == i ? activeColor : color) +
							';' +
							'font-size:' +
							(current == i ? fontSize : fontSize) +
							';' +
							'font-weight:' +
							(bold && current == i ? 'bold' : '') +
							';' +
							'justify-content:' +
							(!scroll ? 'center' : '') +
							';' +
							'flex:' +
							(scroll ? '' : 1) +
							';' +
							'padding:' +
							paddingItem +
							';'
					"
					v-for="(v, i) in tabs"
					:key="i"
				>
					{{ '' + (field ? v[field] : v) + '' }}
				</view>
				<view
					:class="['', 'v-tabs__container-line', [lineAnimation ? 'animation' : '']]"
					:style="
						'background:' +
							lineColor +
							';' +
							'width:' +
							lineWidth +
							'px' +
							';' +
							'height:' +
							lineHeight +
							';' +
							'border-radius:' +
							lineRadius +
							';' +
							'left:' +
							lineLeft +
							'px' +
							';' +
							'transform:' +
							'translateX(-' +
							lineWidth / 2 +
							'px)' +
							';' +
							'bottom:' +
							lineBottom +
							';'
					"
					v-if="!pills"
				></view>
				<view
					:class="['', 'v-tabs__container-pills', [lineAnimation ? 'animation' : '']]"
					:style="
						'background:' +
							pillsColor +
							';' +
							'border-radius:' +
							pillsBorderRadius +
							';' +
							'left:' +
							pillsLeft +
							'px' +
							';' +
							'width:' +
							currentWidth +
							'px' +
							';' +
							'height:' +
							height +
							';'
					"
					v-else
				></view>
			</view>
		</scroll-view>
		<view class="v-tabs__placeholder " :style="'height:' + (fixed ? height : '0') + ';' + 'padding:' + padding + ';'"></view>
	</view>
</template>

<script>
export default {
	props: {
		value: {
			type: Number,
			default: 0
		},
		tabs: {
			type: Array,
			default: function() {
				return [];
			}
		},
		bgColor: {
			type: String,
			default: '#fff'
		},
		padding: {
			type: String,
			default: '0'
		},
		color: {
			type: String,
			default: '#333'
		},
		activeColor: {
			type: String,
			default: '#2979ff'
		},
		fontSize: {
			type: String,
			default: '28rpx'
		},
		activeFontSize: {
			type: String,
			default: '32rpx'
		},
		bold: {
			type: Boolean,
			default: !0
		},
		scroll: {
			type: Boolean,
			default: !0
		},
		height: {
			type: String,
			default: '70rpx'
		},
		lineColor: {
			type: String,
			default: '#2979ff'
		},
		lineHeight: {
			type: String,
			default: '10rpx'
		},
		lineScale: {
			type: Number,
			default: 0.5
		},
		lineRadius: {
			type: String,
			default: '10rpx'
		},
		lineBottom: {
			type: String,
			default: '0'
		},
		pills: {
			type: Boolean,
			default: !1
		},
		pillsColor: {
			type: String,
			default: '#2979ff'
		},
		pillsBorderRadius: {
			type: String,
			default: '10rpx'
		},
		field: {
			type: String,
			default: ''
		},
		fixed: {
			type: Boolean,
			default: !1
		},
		paddingItem: {
			type: String,
			default: '0 22rpx'
		},
		lineAnimation: {
			type: Boolean,
			default: !0
		}
	},
	data: function() {
		return {
			elId: '',
			lineWidth: 30,
			currentWidth: 0,
			lineLeft: 0,
			pillsLeft: 0,
			scrollLeft: 0,
			containerWidth: 0,
			current: 0
		};
	},
	watch: {
		value: function(t) {
			var e = this;
			(this.current = t),
				this.$nextTick(function() {
					e.getTabItemWidth();
				});
		},
		current: function(t) {
			this.$emit('input', t);
		},
		tabs: function(t) {
			var e = this;
			this.$nextTick(function() {
				e.getTabItemWidth();
			});
		}
	},
	methods: {
		randomString: function(t) {
			t = t || 32;
			for (var e = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678', n = e.length, i = '', a = 0; a < t; a++) i += e.charAt(Math.floor(Math.random() * n));
			return i;
		},
		change: function(t) {
			this.current !== t && ((this.current = t), this.$emit('change', t));
		},
		getTabItemWidth: function() {
			var e = this,
				n = uni.createSelectorQuery().in(this);
			n
				.select('#scrollContainer')
				.boundingClientRect(function(t) {
					!e.containerWidth && t && (e.containerWidth = t.width);
				})
				.exec(),
				n
					.selectAll('.v-tabs__container-item')
					.boundingClientRect(function(t) {
						if (t) {
							var n = 0,
								i = 0;
							if (t)
								for (var a = 0; a < t.length; a++)
									if (a < e.current) n += t[a].width;
									else {
										if (a != e.current) break;
										i = t[a].width;
									}
							(e.currentWidth = i),
								(e.lineWidth = i * e.lineScale * 1),
								(e.lineLeft = n + i / 2),
								(e.pillsLeft = n),
								e.scroll && (e.scrollLeft = e.lineLeft - e.containerWidth / 2);
						}
					})
					.exec();
		},
		getTabHeight: function() {
			var e = this;
			uni.createSelectorQuery()
				.in(this)
				.select('.v-tabs')
				.boundingClientRect(function(t) {
					e.$emit('getTabHeight', t.height);
				})
				.exec();
		}
	},
	mounted: function() {
		var t = this;
		(this.elId = 'xfjpeter_' + this.randomString()),
			(this.current = this.value),
			this.$nextTick(function() {
				t.getTabItemWidth(), t.getTabHeight();
			});
	}
};
</script>

<style scoped>
.v-tabs {
	box-sizing: border-box;
	overflow: hidden;
	width: 100%;
}

.v-tabs ::-webkit-scrollbar {
	display: none;
}

.v-tabs__container {
	display: inline-flex;
	min-width: 100%;
	overflow: hidden;
}

.v-tabs__container-item,
.v-tabs__container {
	align-items: center;
	position: relative;
	white-space: nowrap;
}

.v-tabs__container-item {
	display: flex;
	height: 100%;
	transition: all 0.3s;
	z-index: 10;
}

.v-tabs__container-line {
	bottom: 0;
	position: absolute;
}

.v-tabs__container-pills {
	position: absolute;
	z-index: 9;
}

.v-tabs__container-line.animation,
.v-tabs__container-pills.animation {
	transition: all 0.3s linear;
}
</style>
